<template>
  <section>
    <div class="clearfix">
      <div class="w304">
        <el-table :data="formKeyList" highlight-current-row v-loading="loading.listFormKeyLoading"
                  style="width: 100%;cursor: pointer;" stripe border @row-click="clickFormKey">
          <el-table-column align="left" header-align="center" prop="formKey" :label="$t('formConfig.formKey')" min-width="50"
                           :show-overflow-tooltip="true"></el-table-column>
        </el-table>

        <el-row>
          <el-col class="toolbar">
            <el-pagination
              background
              small
              style="margin-left: -10px"
              @size-change="handleSizeChangeFormKey"
              @current-change="handleCurrentChangeFormKey"
              :current-page="formKeyPageInfo.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="formKeyPageInfo.pageSize"
              layout="sizes, prev, pager, next"
              :total="formKeyPageInfo.count">
            </el-pagination>
          </el-col>
        </el-row>
      </div>

      <div class="-w304">
        <el-button v-if="rootModeFlag" size="small" class="search-box__button" type="primary" icon="plus"
                   @click="handleAdd">{{$t('add')}}
        </el-button>

        <!--列表-->
        <el-table :data="formConfigList" highlight-current-row v-loading="loading.listLoading" style="width: 100%;"
                  stripe
                  border>
          <el-table-column align="left" header-align="center" type="index" width="80" :label="$t('index')">
            <template slot-scope="scope">
              {{(pageInfo.pageIndex-1)*pageInfo.pageSize+scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" prop="fieldCode" :label="$t('formConfig.fieldCode')"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="rootModeFlag" align="left" header-align="center" prop="requiredFlag" :label="$t('formConfig.requiredFlag')"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-switch
                @change="changeShowFlag(scope.row,'required')"
                v-model="scope.row.requiredFlag"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :inactive-text="$t('no')"
                :active-text="$t('yes')">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" prop="editShowFlag" :label="$t('formConfig.editShowFlag')"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-switch
                @change="changeShowFlag(scope.row,'editShow')"
                :disabled="scope.row.requiredFlag"
                v-model="scope.row.editShowFlag"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :inactive-text="$t('no')"
                :active-text="$t('yes')">
              </el-switch>
              <!--</el-tooltip>-->
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" prop="listShowFlag" :label="$t('formConfig.listShowFlag')"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-switch
                @change="changeShowFlag(scope.row,'listShow')"
                :disabled="!scope.row.editShowFlag"
                v-model="scope.row.listShowFlag"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :inactive-text="$t('no')"
                :active-text="$t('yes')">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" prop="remark" :label="$t('formConfig.remark')" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="left" header-align="center" prop="modifyDate" :label="$t('modifyDate')"
                           :show-overflow-tooltip="true"></el-table-column>
          <!--<el-table-column align="left" header-align="center" prop="modifier" label="修改人"
                           :show-overflow-tooltip="true"></el-table-column>-->
          <el-table-column align="left" header-align="center" :label="$t('operation')" width="150" v-if="rootModeFlag">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.row, scope.$index)">{{$t('modify')}}</el-button>
              <el-button type="danger" size="mini" @click="deleteData(scope.row, scope.$index)">{{$t('delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-pagination
              style="float:right;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageInfo.pageSize"
              layout="sizes, prev, pager, next"
              :total="pageInfo.count">
            </el-pagination>
          </el-col>
        </el-row>
      </div>

      <!--新增界面-->
      <el-dialog width="95%" top="20px" :title="formData.id==0?$t('add'):$t('modify')" :visible.sync="dialog.formDataVisible"
                 :close-on-click-modal="false" :modal-append-to-body="false">
        <el-form class="main-table" :model="formData" label-width="100px" :rules="formRules" ref="formData">
          <el-form-item class="el-form-item-50" :label="$t('formConfig.formKey')" prop="formKey">
            <el-input v-model="formData.formKey" auto-complete="off" :maxlength="255" :placeholder="$t('formConfig.validateFormKey')"
                      size="small"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item-50" :label="$t('formConfig.fieldCode')" prop="fieldCode">
            <el-input v-model="formData.fieldCode" auto-complete="off" :maxlength="255" :placeholder="$t('formConfig.validateFieldCode')"
                      size="small"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item-33" :label="$t('formConfig.requiredFlag')" prop="requiredFlag" label-width="100">
            <el-tooltip :content="formData.requiredFlag?$t('yes'):$t('no')" placement="top">
              <el-switch
                v-model="formData.requiredFlag"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item class="el-form-item-33" :label="$t('formConfig.editShowFlag')" prop="editShowFlag" label-width="100">
            <el-tooltip :content="formData.editShowFlag?$t('yes'):$t('no')" placement="top">
              <el-switch
                :disabled="disabledVal.editShowFlag"
                v-model="formData.editShowFlag"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item class="el-form-item-33" :label="$t('formConfig.listShowFlag')" prop="listShowFlag" label-width="100">
            <el-tooltip :content="formData.listShowFlag?$t('yes'):$t('no')" placement="top">
              <el-switch
                :disabled="disabledVal.listShowFlag"
                v-model="formData.listShowFlag"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <!--<el-form-item label="编辑" prop="editFlag">
            <el-radio-group v-model="formData.editFlag" size="small">
              <el-radio-button :label="true">是</el-radio-button>
              <el-radio-button :label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>-->
          <el-form-item class="el-form-item-100" :label="$t('formConfig.remark')" prop="remark">
            <el-input v-model="formData.remark" auto-complete="off" :maxlength="200" :placeholder="$t('formConfig.validateRemark')"
                      size="small"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="handleCancel">{{$t('cancel')}}</el-button>
          <el-button type="primary" @click.native="submitData" :loading="loading.addLoading">{{$t('submit')}}</el-button>
        </div>
      </el-dialog>
    </div>
  </section>
</template>
<script>

  /*#region 导入函数*/
  import PagePlugIn from "../../../mixins/page-plug-in";
  import {FormConfigAPI} from "../../../modules";
  import {UrlParamUtil} from "../../../utils/utils.js";

  /*#endregion*/

  export default {
    name: "FormConfig",
    methods: {

      /*#region 自定义函数(组件change事件等)*/
      clickFormKey(row) {
        if (row && row.formKey) {
          setTimeout(() => {
            this.filters.formKey = row.formKey;
            this.getMainList();
          }, 100);
        }
      },
      changeShowFlag(row, index) {
        if (index === "required") {
          if (row.requiredFlag) {
            row.editShowFlag = row.requiredFlag;
          }
        }
        if (index === "editShow") {
          if (!row.editShowFlag) {
            row.listShowFlag = row.editShowFlag;
          }
        }
        FormConfigAPI.updateFormConfig(row).then(({res}) => {
          if (res.data.code === 1) {
            this.getMainList();
          }
        });

        /*else if (index === 'listShow') {
                 console.log('等于listShow')
          }*/
      },

      /*#endregion*/

      /*#region 数据提交事件*/

      //提交事件

      submitData() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            const params = JSON.parse(JSON.stringify(this.formData));
            if (params.id === 0) {
              this.loading.addLoading = true;
              FormConfigAPI.insertFormConfig(params).then(({data}) => {
                if (data.code === 1) {
                  this.$refs.formData.resetFields();
                  this.getMainList();
                  this.dialog.formDataVisible = false;
                }
                this.loading.addLoading = false;
              });
            } else {
              this.loading.addLoading = true;
              FormConfigAPI.updateFormConfig(params).then(({data}) => {
                if (data.code === 1) {
                  this.$refs.formData.resetFields();
                  this.getMainList();
                  this.dialog.formDataVisible = false;
                }
                this.loading.addLoading = false;
              });
            }
          }
        });
      },

      //删除
      deleteData(row) {
        this.$confirm(this.$t('deleteConfirm'), this.$t('tips'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: "warning"
        }).then(() => {
          FormConfigAPI.deleteFormConfig({id: row.id}).then(({data}) => {
            if (data.code === 1) {
              this.getMainList();
            }
          });
        });
      },


      /*#endregion*/

      /*#region 操作函数(handle)*/
      handleSizeChangeFormKey(val) {
        this.formKeyPageInfo.pageSize = val;
        this.getFormKeyByFormConfig();
      }, handleCurrentChangeFormKey(val) {
        this.formKeyPageInfo.pageIndex = val;
        this.getFormKeyByFormConfig();
      },
      //修改
      handleEdit(row) {
        this.$refs.formData && this.$refs.formData.resetFields();
        this.formData = JSON.parse(JSON.stringify(row));
        this.dialog.formDataVisible = true;
      },
      handleCancel() {
        this.dialog.formDataVisible = false;
      },
      handleAdd() {
        this.$refs.formData && this.$refs.formData.resetFields();
        this.formData = {
          ...FormConfigAPI.init(), formKey: this.filters.formKey || "",
          requiredFlag: true, editShowFlag: true, listShowFlag: true
        };
        this.dialog.formDataVisible = true;
      },

      /*#endregion*/

      /*#region 获取数据*/
      getFormKeyByFormConfig() {
        FormConfigAPI.listFormKeyByFormConfig(this.formKeyPageInfo).then(({res, list}) => {
          this.formKeyList = list || [];
          this.formKeyPageInfo.pageIndex = res.data.data ? res.data.data.currentPage : 1;
          this.formKeyPageInfo.count = res.data.data ? res.data.data.count : 0;
        });
      },
      getMainList() {
        const params = {
          ...this.getParams(),
          orderBy: "FieldCode Asc"
        };
        FormConfigAPI.listFormConfig(params).then(({data, list}) => {
          this.formConfigList = list;
          this.pageInfo.pageIndex = data.data ? data.data.currentPage : 1;
          this.pageInfo.count = data.data ? data.data.count : 0;
        });
      }

      /*#endregion*/

    },

    /*#region 生命周期函数(created、mount、等)*/

    created() {
      const mode = UrlParamUtil.getUrlParam("mode");
      //console.log("urlParam:", mode)

      if (mode && mode === "whosyourdaddy") {
        this.rootModeFlag = true;
      }
      this.getFormKeyByFormConfig();
    },

    /*#endregion*/

    /*#region 注册绑定数据*/

    mixins: [PagePlugIn],
    watch: {
      "formData.requiredFlag": function (newVal, oldVal) {
        if (newVal) {
          this.formData.editShowFlag = newVal;
          this.disabledVal.editShowFlag = true;
        } else {
          this.disabledVal.editShowFlag = false;
        }
      },
      "formData.editShowFlag": function (newVal, oldVal) {
        if (newVal) {
          this.disabledVal.listShowFlag = false;
        } else {
          this.formData.listShowFlag = newVal;
          this.disabledVal.listShowFlag = true;
        }
      }
    },
    data() {
      return {
        filters: FormConfigAPI.init(),
        formData: FormConfigAPI.init(),
        formRules: {
          formKey: [{required: true, message: this.$t('formConfig.validateFormKey')}],
          fieldCode: [{required: true, message: this.$t('formConfig.validateFieldCode')}],
          listShowFlag: [{required: true, message: this.$t('formConfig.validateListShowFlag'), trigger: "change"}],
          editShowFlag: [{required: true, message: this.$t('formConfig.validateEditShowFlag'), trigger: "change"}],
          requiredFlag: [{required: true, message: this.$t('formConfig.validateRequiredFlag'), trigger: "change"}]
        },
        dialog: {formDataVisible: false},
        loading: {addLoading: false, listLoading: false, listFormKeyLoading: false},
        formKeyPageInfo: {pageIndex: 1, pageSize: 10, count: 0},
        formConfigList: [],
        rootModeFlag: false,
        disabledVal: {listShowFlag: false, editShowFlag: false, requiredFlag: false},
        formKeyList: []//表集合
      };
    }

    /*#endregion */

  };
</script>

<style scoped lang="scss">
  .main-table {
    .el-form-item-100 {
      width: 98%;
      display: inline-block;
    }
    .el-form-item-50 {
      width: 49%;
      display: inline-block;
    }
    .el-form-item-33 {
      width: 33%;
      display: inline-block;
    }

  }

  div.clearfix {
    width: 100%;
  }

  .w304 {
    width: 15%;
    float: left;
  }

  .-w304 {
    width: calc(100% - 17%);
    float: left;
    margin-left: 10px;
  }

  .sales-order-title {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    background: #3973a3; /*#e0e0e0*/
    color: #f5f7fa;
    font-weight: bold;
  }

  .sales-orders {
    height: auto;
  }
</style>
